<template>
    <div class="box_fahuo">
      <div class="home">
          <div class="box_title">
            <span>{{this.order.orderSn}}</span>
            <span>成交于{{this.order.ctime| formatDate('YYYY-MM-DD hh:mm:ss')}}</span>
          </div>
          <div class="box_nav">
            <img v-bind:src="order.headPhoto" alt>
              <span>{{this.order.consignee}}</span>
          </div>
          <div class="box_msg" v-for="goodsOrder in order.goodsList" :key="goodsOrder.goodsId">
              <img v-bind:src="goodsOrder.goodsThum" alt>
              <div class="msg_sun">
                  <div>{{goodsOrder.goodsName}}</div>
                  <span>￥{{goodsOrder.goodsScreenPrice|amountMin100(2)}}(含快递费0:00)</span>
              </div>
          </div>
          <div class="box_yinying">
            <img src="../../assets/images/定位@2x.png" alt="">
            <div>{{order.consignee}}，{{order.mobile}}，{{order.shippingAddress}}</div>
          </div>
          <div class="fahuo">
            <span>发货方式</span>
            <span @click="kuaidi()">{{this.conted}}</span>
          </div>
          <div class="fahuo" v-show="lods">
            <span>物流公司</span>
            <span  @click="wuliu()">{{this.heifo}}</span>
          </div>
          <div class="wuliu" v-show="lods">
          <!-- <span>物流单号</span>
          <span>{{this.expressSn}}</span> -->
          <label for="bomdanhao">物流单号</label>
          <input type="text" id="bomdanhao" v-model="expressSn" placeholder="请填写物流单号">
          <!-- <img src="../../assets/images/扫一扫@2x.png" alt=""> -->
          </div>

          <!-- 发货方式 -->
          <mt-popup
          v-model="popupVisible"
          closeOnClickModal=""
          popup-transition="popup-fade">
            <div style="width:300px; height:250px; border-radius:15px;">
             <div style="text-align:left; margin:20px 0 0 10px;">请选择</div>
              <mt-picker :slots="slots" @change="onValuesChange"></mt-picker>
               <div class="bombtn">
           <router-link to @click.native="quxiao()">取消</router-link>
           <router-link to style="color:black; background:#F3F5F7" @click.native="queding()">确定</router-link>
          </div>
            </div>
         </mt-popup>



          <!-- 快递方式 -->
              <mt-popup
          v-model="propt"
          closeOnClickModal=""
          popup-transition="popup-fade">
            <div style="width:300px; height:250px; border-radius:15px;">
             <div style="text-align:left; margin:20px 0 0 10px;">请选择</div>
              <mt-picker :slots="value" @change="wuliuchange"></mt-picker>
               <div class="bombtn">
           <router-link to @click.native="wlquxiao()">取消</router-link>
           <router-link to style="color:black; background:#F3F5F7" @click.native="wlqueding()">确定</router-link>
          </div>
            </div>
         </mt-popup>

          <div class="layer_box">
              设置默认物流公司，发货更有效率 <span style="color:#12A7FE; background:#FDFCCD;">
                <router-link :to="{path:'me_morenwl',query:{orderid:this.orderId}}" style="color:#12A7FE;  background:#FDFCCD;">>>去设置</router-link>
              </span>
          </div>
           <div class="bombtn">
           <router-link :to="{path:'me_indent'}">取消</router-link>
           <router-link to @click.native="update()">确定</router-link>
          </div>
      </div>
    
    </div>
     
</template>

<script>
import { Popup,Picker} from 'mint-ui';
export default {
     components: {
      [Popup.name]:Popup,
      [Picker.name]:Picker,
  },
  data() {
    return {
      popupVisible:false,
      nomod:false,
      pickerVisible:true,
      propt:false,
      conted:'快递配送',
      fangshimsg:'',
      cont:'',
      orderId:'',
      order:{},
      heifo:'',
      expressSn:'',
      lods:false,
      slots: [
          {
            flex: 1,
            values: ['商家配送', '快递配送', '用户自提'],
            className: 'gundong',
            textAlign: 'center',
          },
      ],
      value:[
          {
            flex: 1,
            values: ['顺丰快递', '圆通快递', '京东快递','EMS','申通快递','中通快递','韵达快递','EMS经济快递','国通快递'],
            className: 'gundong',
            textAlign: 'center',
           
          },
      ],
      }
    },
    mounted() {
      this.orderId = this.$route.query.orderId
      this.getOrder()
      if(this.conted=='快递配送'){
        this.lods=true
      }
    },
    methods:{
      wuliu(){
        this.propt=true
      },
      kuaidi(){
        this.popupVisible=true
      },
      queding:function(){
        console.log(this.conted,this.fangshimsg)
        this.conted=this.fangshimsg
        this.popupVisible=false
        if(this.conted=='快递配送'){
             this.lods=true
        }else{
          this.lods=false
        }
      },
      quxiao(){
        this.popupVisible=false
      },
      onValuesChange(picker, values) {
         this.fangshimsg=values[0]
        if (values[0] > values[1]) {
          picker.setSlotValue(1, values[0]);
        }
      },
      wuliuchange(picker, values){
        console.log(values[0])
        this.cont=values[0]
         if (values[0] > values[1]) {
          picker.setSlotValue(1, values[0]);
        }
      },
      wlquxiao(){
       this.propt=false
      },
      wlqueding(){
        this.heifo=this.cont
        this.propt=false
      },
      update(){
        if(this.conted=='商家配送'){
          this.conted=1
        }else if(this.conted=='快递配送'){
          this.conted=2
        }else{
          this.conted=3
        }
        console.log(this.orderId,this.conted,this.heifo,this.expressSn)
        let url = this.APIURL_PREFIX + '/api/wap/updateShoppingOrder';
        this.$http.put(url,$.param({ id: this.orderId, expressWay : this.conted,expressName: this.heifo,expressSn: this.expressSn,orderStatus :1 })).then((res) => {
             console.log(res)
             if(res.data.code==0){
                this.$router.push({ path: 'me_fahuodetails',query:{orderid:this.orderId}})
             }
          
        })
        
      
      },
      getOrder(){
        let url = this.APIURL_PREFIX + '/api/wap/orderForCompany';
        this.$http.get(url,{params:{page:1,id:this.orderId}}).then((res) => {
          this.order = res.data.data;
          if(res.data.data.defaultLogistics==''){
            this.heifo='顺丰快递'
          }else{
            this.heifo =res.data.data.defaultLogistics
          }
          console.log(this.order)
        })
      },
    }
}
</script>

<style scoped>
@import "../../assets/personal/css/indent_fahuo.css";
.gundong{
  color:red!important;
}
</style>
